<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/reset.css">
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }
        body {
            text-align: left;
            width: 100%;
            -webkit-tap-highlight-color: rgba(0,0,0,.05);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            background: #e9dfc7;
            overflow: hidden;
        }
        .m-read-content {
            font-size: 14px;
            color: #555;
            line-height: 31px;
            padding: 15px;
        }
        .m-read-content h4 {
            font-size: 20px;
            color: #736357;
            border-bottom: solid 1px #736357;
            margin: 0 0 1em 0;
            letter-spacing: 2px;
        }

        .m-read-content p {
            text-indent: 2em;
            margin: 0.5em 0;
            text-align: justify;
            letter-spacing: 0px;
            line-height: 24px;
        }
        .artical-action-top {
            position: fixed;
            top: 0px;
            height: 30%;
            width: 100%;
            z-index: 90;
        }
        .artical-action-mid {
            position: fixed;
            top: 30%;
            height: 40%;
            width: 100%;
            z-index: 10002;
        }
        .artical-action-bottom {
            position: fixed;
            bottom: 0px;
            height: 30%;
            width: 100%;
            z-index: 90;
        }
        .m-tool-bar {
            text-align: center;
            width: 100%;
            height: 40px;
            position: fixed;
            bottom: 0px;
            z-index: 10000;
        }
        .m-tool-bar-mask {
            text-align: center;
            width: 100%;
            height: 40px;
            position: fixed;
            bottom: 0px;
            z-index: 9999;
            background: #000;
            opacity: .9;
        }
        .menu-mask {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999;
            background: #000;
            opacity: .8;
            top: 0px
        }
        .m-tool-button {
            padding: 5px 15px;
            margin-top: 7px;
            border: 1px #fff solid;
            background: transparent;
            color: #fff
        }
        .top-nav {
            position: fixed;
            top: 0px;
            height: 50px;
            background: #000;
            width: 100%;
            opacity: 1;
            z-index: 10004
        }
        .top-nav-warp {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
        }
        .top-nav-pannel-bk {
            position: fixed;
            bottom: 70px;
            height: 135px;
            background: #000;
            width: 100%;
            color: #fff;
            opacity: 0.9;
            z-index: 10003
        }
        .top-nav-pannel {
            position: fixed;
            bottom: 70px;
            height: 135px;
            background: none;
            width: 100%;
            color: #fff;
            z-index: 10004
        }
        .top-nav-pannel button {
            background: none;
            border: 1px #8c8c8c solid;
            padding: 5px 40px;
            color: #fff;
            display: inline-block;
            border-radius: 16px;
        }
        .top-nav-pannel .bk-container {
            position: relative;
            height: 30px;
            width: 30px;
            background: #fff;
            border-radius: 15px;
            display: inline-block;
            vertical-align: -14px;
            margin-left: 10px;
        }
        .top-nav-pannel .bk-container-current {
            position: absolute;
            height: 32px;
            width: 32px;
            border-radius: 16px;
            display: inline-block;
            vertical-align: -14px;
            margin-left: 10px;
            border: 1px #ff7800 solid;
            top: -2px;
            left: -12px;
        }
        .top-nav-pannel .bk-container span {
            position: absolute;
            top: 32px;
            left: -8px;
            display: block;
            font-size: 12px;
            width: 40px;
        }
        .bottom-nav-bk {
            position: fixed;
            bottom: 0px;
            height: 70px;
            background: #000;
            width: 100%;
            opacity: .9;
            z-index: 10004
        }

        .bottom-nav {
            position: fixed;
            bottom: 0px;
            height: 70px;
            background: none;
            width: 100%;
            opacity: 1;
            z-index: 10004;
            margin: 0 auto;
            text-align: center
        }
        .bottom-nav .item {
            display: inline-block;
            width: 32%;
            color: #fff;
            text-align: center;
            margin: 0 auto;
        }

        .m-button-bar {
            text-align: center;
            font-size: 14px;
            padding: 5px;
            margin: 10px;
            max-width: 900px;
            margin: 0 auto;
            width: 70%
        }
        .m-button-bar button {
            background: none;
            border: 1px #000 solid;
            padding: 5px 10px;
        }
        .nav-title {
            position: absolute;
            top: 16px;
            left: 42px;
            color: #d5d5d6
        }
        .top-nav button {
            width: 65px;
            font-size: 12px;
            background: none;
            border: 1px #d5d5d6 solid;
            padding: 5px 10px;
            color: #d5d5d6;
            position: absolute;
            top: 11px;
            border-radius: 16px 0 0 16px;
            opacity: 0.9
        }

        .child-mod {
            padding: 5px 10px;
            margin-top: 15px
        }
        .child-mod span {
            display: inline-block;
            padding-right: 20px;
            padding-left: 10px;
        }
        .large-font p {
            font-size: 18px
        }
        .small-font p {
            font-size: 14px
        }
        .menu-container {
            height: 60%;
            position: fixed;
            bottom: 0px;
            width: 100%;
            overflow: scroll;
            background: #fff;
            display: block;
            z-index: 19999
        }
        .chapter-list {
            text-align: left;
        }
        .chapter-list li {
            padding: 15px;
        }
        .chapter-list li:nth-child(2n-1) {
            background-color: #ededed
        }
        .chapter-list li:nth-child(2n) {
            background-color: #e6e6e6
        }
        .chapter-list .free {
            float: right;
        }
        .free {
            color: #459c3a;
        }
        .loading {
            position: fixed;
            text-align: center;
            width: 100%;
            top: 40%;
            color: #fff;
            z-index: 199999
        }
        .u-tab {
            position: relative;
            height: 34px;
            margin: 10px auto;
            line-height: 34px;
            border-radius: 8px;
            border: 1px solid #858382;
            font-size: 13px;
            background: #000;
            opacity: 0.9;
        }
        .u-tab li {
            display: inline-block;
            width: 49%;
            font-size: 13px;
            border-right: 1px solid #858382;
            -webkit-box-sizing: border-box;
            text-align: center;
            color: #fff;
        }
        .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 12000;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: .4;
            background: #000;
        }

        .buy-mask {
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0px;
            text-align: center;
            margin: 0 auto;
            display: none;
            z-index: 10001;
            background: #e9dfc7;
        }
        .icon-back {
            position: absolute;
            top: 14px;
            left: 10px;
            width: 23px;
            height: 23px;
            background: url();
            background-size: contain;
        }
        .icon-text {
            position: absolute;
            top: 25px;
            font-size: 10px;
        }
        .icon-menu, .icon-ft, .icon-night, .icon-day {
            position: absolute;
            top: 3px;
            left: 2px;
            width: 18px;
            height: 13px;
            background: url();
            background-size: contain;
        }
        .icon-night, .icon-day, .icon-ft {
            left: 1px;
        }
        .icon-ft {
            width: 20px;
            height: 13px;
            background: url();
            background-size: contain;
        }

        .current .icon-ft {
            top: 2px;
            left: 0px;
            width: 22px;
            height: 15px;
            background: url();
            background-size: contain;
        }

        .icon-day {
            width: 19px;
            height: 18px;
            background: url();
            background-size: contain;
        }

        .icon-night {
            left: 4px;
            width: 16px;
            height: 16px;
            background: url();
            background-size: contain;
        }

        .item-warp {
            width: 26px;
            margin: 0 auto;
            position: relative;
        }
        .loading-icon {
            margin: 0 auto;
            margin-top: 50%;
            background: url();
            width: 20px;
            height: 20px;
        }
        .loading-mask {
            text-align: center;
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.1;
            position: fixed;
            top: 0px;
        }

        .buy-container {
            width: 100%;
            position: fixed;
            top: 20%;
            text-align: center;
            margin: 0 auto;
            display: none;
            z-index: 10003
        }
        .buy-container h3 {
            font-weight: normal;
            line-height: 30px;
            font-family: microsoft yahei, arial, helvetica, sans-serif
        }
        .buy-container h2 {
            padding-bottom: 80px;
        }

        .buy-container button {
            font-family: microsoft yahei, arial, helvetica, sans-serif;
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            border: none;
            color: #fff;
            padding: 0 10px;
            width: 160px;
            background: #4a90b1;
            margin-top: 10px;
        }

        .m-read-content {
            min-height: 300px;
            max-width: 900px;
            margin: 0 auto;
        }

        .buy-popup-frame {
            display: none;
            position: fixed;
            bottom: 0px;;
            left: 0px;
            width: 100%;
            height: 266px;
            z-index: 39999
        }
    </style>
</head>
<body>
<div class="loading-mask" id="init_loading">
    <div class="loading-icon"></div>
</div>
<div class="container" id="root">
    <div id="fiction_chapter_title"></div>
    <div class="m-artical-action">
        <div class="artical-action-mid" id="action_mid"></div>
    </div>
    <div id="fiction_container" class="m-read-content"></div>
    <div class="top-nav" id="top-nav" style="display:none">
        <div class="top-nav-warp">
            <div class="icon-back"></div>
            <div class="nav-title" id="nav_title">
                返回书架
            </div>
        </div>
    </div>
    <div class="top-nav-pannel-bk font-container" id="font-container" style="display:none"></div>
    <div class="top-nav-pannel font-container" id="font-container" style="display:none">
        <div class="child-mod">
            <span>字号</span>
            <button id="large-font" class="spe-button">
                大
            </button>
            <button id="small-font" class="spe-button" style="margin-left:10px;">
                小
            </button>
        </div>
        <div class="child-mod" id="bk-container">
            <span>背景</span>
        </div>
    </div>
    <div class="m-button-bar" id="bottom_tool_bar" style="display:none;padding-bottom:70px;">
        <ul class="u-tab" id="bottom_tool_bar_ul">
            <li id="prev_button" >
                上一章
            </li>
            <li id="next_button" style="border-right:none">
                下一章
            </li>
        </ul>
    </div>

    <div class="bottom-nav-bk bottom_nav" style="display:none"></div>

    <div class="bottom-nav bottom_nav" style="display:none">
        <div class="item menu-button" id="menu_button">
            <div class="item-warp">
                <div class="icon-menu"></div>
                <div class="icon-text">
                    目录
                </div>
            </div>
        </div>
        <div class="item" id="font-button">
            <div class="item-warp">
                <div class="icon-ft"></div>
                <div class="icon-text">
                    字体
                </div>
            </div>
        </div>
        <div class="item" id="night-button">
            <div class="item-warp" style="display:none" id="day_icon">
                <div class="icon-day"></div>
                <div class="icon-text">
                    白天
                </div>
            </div>
            <div class="item-warp" id="night_icon">
                <div class="icon-night"></div>
                <div class="icon-text">
                    夜间
                </div>
            </div>
        </div>
    </div>

    <div class="loading" id="loading" style="display:none">
        正在加载中...
    </div>
    <div class="m-tool-bar-mask" id="tool_bar_mask" style="display:none"></div>
    <ul class="menu-container chapter-list" id="menu_container" style="display:none"></ul>
    <div class="menu-mask" id="menu_mask" style="display:none"></div>
    <div class="mask" id="mask" style="display:none"></div>
</div>
<script src="/static/script/zepto.min.js"></script>
<script>
    window.jQuery = $;
</script>
<script src="/static/script/jquery.base64.js"></script>
<script src="/static/script/jquery.jsonp.js"></script>

<script>
    (function() {'use strict';
        var Util = (function() {
            var prefix = 'ficiton_reader_';
            var StorageGetter = function(key) {
                return localStorage.getItem(prefix + key);
            }
            var StorageSetter = function(key, val) {
                return localStorage.setItem(prefix + key, val);
            }
            //数据解密
            function getBSONP(url, callback) {
                return $.jsonp({
                    url : url,
                    cache : true,
                    callback : "duokan_fiction_chapter",
                    success : function(result) {
                        var data = $.base64.decode(result);
                        var json = decodeURIComponent(escape(data));
                        callback(json);
                    }
                });

            };

            return {
                getBSONP : getBSONP,
                StorageGetter : StorageGetter,
                StorageSetter : StorageSetter
            }
        })();

        //获得阅读器内容的方法
        function ReaderModel(id_, cid_, onChange_) {
            var Title = "";

            var Fiction_id = id_;

            var Chapter_id = cid_;

            if (Util.StorageGetter(Fiction_id + 'last_chapter')) {
                Chapter_id = Util.StorageGetter(Fiction_id + 'last_chapter');
            }

            if (!Chapter_id) {
                Chapter_id = 1;
            }
            var Chapters = [];

            var init = function() {
                getFictionInfoPromise.then(function(d) {
                    gotoChapter(Chapter_id);
                });
                /*
                 getFictionInfo(function() {
                 gotoChapter(Chapter_id);
                 });
                 */
            }
            var gotoChapter = function(chapter_id) {
                Chapter_id = chapter_id;
                getCurChapterContent();
            };

            //获得当前章节内容
            var getCurChapterContent = function() {
                $.get("/ajax/chapter_data",{
                    id : Chapter_id
                }, function(data) {

                    if (data.result == 0) {
                        var url = data.jsonp;
                        Util.getBSONP(url, function(data) {
                            $('#init_loading').hide();
                            onChange_ && onChange_(data);
                        });
                    } else {

                    }
                }, 'json');
                return;

            };

            var getFictionInfoPromise = new Promise(function(resolve, reject) {
                $.get("/ajax/chapter", function(data) {
                    if (data.result == 0) {
                        Title = data.title;
                        $('#nav_title').html('返回书架');
                        window.ChaptersData = data.chapters;
                        window.chapter_data = data.chapters;
                        for (var i = 0; i < data.chapters.length; i++) {
                            Chapters.push({
                                "chapter_id" : data.chapters[i].chapter_id,
                                "title" : data.chapters[i].title
                            })
                        }
                        resolve(Chapters);
                    } else {
                        reject(data);
                    }
                }, 'json');
            });

            /*
             var getFictionInfo = function(callback) {
             $.get("/data/chapter.json", function(data) {
             Title = data.title;
             $('#nav_title').html('返回书架');
             window.ChaptersData = data.chapters;
             window.chapter_data = data.chapters;
             for (var i = 0; i < data.chapters.length; i++) {
             Chapters.push({
             "chapter_id" : data.chapters[i].chapter_id,
             "title" : data.chapters[i].title
             })
             }

             callback && callback();
             }, 'json');
             };
             */
            //获得上一章内容
            var prevChapter = function() {
                Chapter_id = parseInt(Chapter_id);
                if (Chapter_id == 0) {
                    return
                }
                var cid = Chapter_id - 1;
                gotoChapter(cid);
                Util.StorageSetter(Fiction_id + 'last_chapter', Chapter_id);
            };

            //获得下一章内容
            var nextChapter = function() {
                Chapter_id = parseInt(Chapter_id);
                if (Chapter_id == Chapters.length - 1) {
                    return
                }
                var cid = Chapter_id + 1;
                gotoChapter(cid);
                Util.StorageSetter(Fiction_id + 'last_chapter', Chapter_id);
            };

            return {
                init : init,
                go : gotoChapter,
                prev : prevChapter,
                next : nextChapter,
                getChapter_id : function() {
                    return Chapter_id;
                }
            };
        }

        //画一下基本的展示框架
        function RenderBaseFrame(container) {
            function parseChapterData(jsonData) {
                var jsonObj = JSON.parse(jsonData);
                var html = "<h4>" + jsonObj.t + "</h4>";
                for (var i = 0; i < jsonObj.p.length; i++) {
                    html += "<p>" + jsonObj.p[i] + "</p>";
                }
                return html;
            }

            return function(data) {
                container.html(parseChapterData(data));
            };
        }

        function main() {
            // 获取fiction_id 和 chapter_id
            var RootContainer = $('#fiction_container');

            var Fiction_id, Chapter_id;

            // 绑定事件
            var ScrollLock = false;
            var Doc = document;
            var Screen = Doc.body;
            var Win = $(window);

            //是否是夜间模式
            var NightMode = false;

            //初始化的字体大小
            var InitFontSize;

            //dom节点的缓存
            var Dom = {
                bottom_tool_bar : $('#bottom_tool_bar'),
                nav_title : $('#nav_title'),
                bk_container : $('#bk-container'),
                night_button : $('#night-button'),
                next_button : $('#next_button'),
                prev_button : $('#prev_button'),
                back_button : $('#back_button'),
                top_nav : $('#top-nav'),
                bottom_nav : $('.bottom_nav')
            }

            // 程序初始化
            var readerUIFrame = RenderBaseFrame(RootContainer);

            //获得章节数据，展示
            var readerModel = ReaderModel(Fiction_id || 13359, Chapter_id, function(data) {
                readerUIFrame(data);
                Dom.bottom_tool_bar.show();
                setTimeout(function() {
                    ScrollLock = false;
                    Screen.scrollTop = 0;
                }, 20);
            });

            //阅读器数据内容展示
            readerModel.init();

            //从缓存中读取的信息进行展示
            var ModuleFontSwitch = (function() {
                //字体和背景的颜色表
                var colorArr = [{
                    value : '#f7eee5',
                    name : '米白',
                    font : ''
                }, {
                    value : '#e9dfc7',
                    name : '纸张',
                    font : '',
                    id : "font_normal"
                }, {
                    value : '#a4a4a4',
                    name : '浅灰',
                    font : ''
                }, {
                    value : '#cdefce',
                    name : '护眼',
                    font : ''
                }, {
                    value : '#283548',
                    name : '灰蓝',
                    font : '#7685a2',
                    bottomcolor : '#fff'
                }, {
                    value : '#0f1410',
                    name : '夜间',
                    font : '#4e534f',
                    bottomcolor : 'rgba(255,255,255,0.7)',
                    id : "font_night"
                }];

                var tool_bar = Util.StorageGetter('toolbar_background_color');
                var bottomcolor = Util.StorageGetter('bottom_color');
                var color = Util.StorageGetter('background_color');
                var font = Util.StorageGetter('font_color');
                var bkCurColor = Util.StorageGetter('background_color');
                var fontColor = Util.StorageGetter('font_color');

                for (var i = 0; i < colorArr.length; i++) {
                    var display = 'none';
                    if (bkCurColor == colorArr[i].value) {
                        display = '';
                    }
                    Dom.bk_container.append('<div class="bk-container" id="' + colorArr[i].id + '" data-font="' + colorArr[i].font + '"  data-bottomcolor="' + colorArr[i].bottomcolor + '" data-color="' + colorArr[i].value + '" style="background-color:' + colorArr[i].value + '"><div class="bk-container-current" style="display:' + display + '"></div><span style="display:none">' + colorArr[i].name + '</span></div>');
                }

                RootContainer.css('min-height', $(window).height() - 100);

                if (bottomcolor) {
                    $('#bottom_tool_bar_ul').find('li').css('color', bottomcolor);
                }

                if (color) {
                    $('body').css('background-color', color);
                }

                if (font) {
                    $('.m-read-content').css('color', font);
                }

                //夜间模式
                if (fontColor == '#4e534f') {
                    NightMode = true;
                    $('#day_icon').show();
                    $('#night_icon').hide();
                    $('#bottom_tool_bar_ul').css('opacity', '0.6');
                }

                //字体设置信息
                InitFontSize = Util.StorageGetter('font_size');
                InitFontSize = parseInt(InitFontSize);
                if (!InitFontSize) {
                    InitFontSize = 18;
                }

                RootContainer.css('font-size', InitFontSize);

            })();



            //页面中的零散交互事件处理
            var EventHandler = (function() {
                //夜间和白天模式的转化
                Dom.night_button.click(function() {
                    if (NightMode) {
                        $('#day_icon').hide();
                        $('#night_icon').show();
                        $('#font_normal').trigger('click');
                        NightMode = false;
                    } else {
                        $('#day_icon').show();
                        $('#night_icon').hide();
                        $('#font_night').trigger('click');
                        NightMode = true;
                    }

                });

                //字体和背景颜色的信息设置
                Dom.bk_container.delegate('.bk-container', 'click', function() {
                    var color = $(this).data('color');
                    var font = $(this).data('font');
                    var bottomcolor = $(this).data('bottomcolor');
                    var tool_bar = font;
                    Dom.bk_container.find('.bk-container-current').hide();
                    $(this).find('.bk-container-current').show();
                    if (!font) {
                        font = '#000';
                    }
                    if (!tool_bar) {
                        tool_bar = '#fbfcfc';
                    }

                    if (bottomcolor && bottomcolor != "undefined") {
                        $('#bottom_tool_bar_ul').find('li').css('color', bottomcolor);
                    } else {
                        $('#bottom_tool_bar_ul').find('li').css('color', '#a9a9a9');
                    }
                    $('body').css('background-color', color);
                    $('.m-read-content').css('color', font);

                    Util.StorageSetter('toolbar_background_color', tool_bar);
                    Util.StorageSetter('bottom_color', bottomcolor);
                    Util.StorageSetter('background_color', color);
                    Util.StorageSetter('font_color', font);

                    var fontColor = Util.StorageGetter('font_color');
                    //夜间模式
                    if (fontColor == '#4e534f') {
                        NightMode = true;
                        $('#day_icon').show();
                        $('#night_icon').hide();
                        $('#bottom_tool_bar_ul').css('opacity', '0.6');
                    } else {
                        NightMode = false;
                        $('#day_icon').hide();
                        $('#night_icon').show();
                        $('#bottom_tool_bar_ul').css('opacity', '0.9');
                    }
                });

                //按钮的多态样式效果
                $('.spe-button').on('touchstart', function() {
                    $(this).css('background', 'rgba(255,255,255,0.3)');
                }).on('touchmove', function() {
                    $(this).css('background', 'none');
                }).on('touchend', function() {
                    $(this).css('background', 'none');
                });

                //字体放大
                $('#large-font').click(function() {
                    if (InitFontSize > 20) {
                        return;
                    }
                    InitFontSize += 1;
                    Util.StorageSetter('font_size', InitFontSize);
                    RootContainer.css('font-size', InitFontSize);
                });

                //字体缩小
                $('#small-font').click(function() {
                    if (InitFontSize < 12) {
                        return;
                    }
                    InitFontSize -= 1;
                    localStorage.StorageSetter('font_size', InitFontSize);
                    RootContainer.css('font-size', InitFontSize);
                });

                var font_container = $('.font-container');
                var font_button = $('#font-button');
                var menu_container = $('#menu_container');

                font_button.click(function() {
                    if (font_container.css('display') == 'none') {
                        font_container.show();
                        font_button.addClass('current');
                    } else {
                        font_container.hide();
                        font_button.removeClass('current');

                    }
                });

                RootContainer.click(function() {
                    font_container.hide();
                    font_button.removeClass('current');
                });

                //对屏幕的滚动监控
                Win.scroll(function() {
                    Dom.top_nav.hide();
                    Dom.bottom_nav.hide();
                    font_container.hide();
                    font_button.removeClass('current');
                });

                //章节翻页
                Dom.next_button.click(function() {
                    fiction.next();
                });

                Dom.prev_button.click(function() {
                    fiction.prev();
                });

                //返回上级页面
                Dom.back_button.click(function() {
                    if (Fiction_id) {
                        location.href = '/book/' + Fiction_id;
                    }
                });

                //返回首页
                Dom.nav_title.click(function() {
                    location.href = '/';
                });

                $('.icon-back').click(function() {
                    location.href = '/';
                });

                $('#menu_button').click(function() {
                    location.href = 'http://dushu.xiaomi.com/fiction/chapter/306450';
                });

                //屏幕中央事件
                $('#action_mid').click(function() {
                    if (Dom.top_nav.css('display') == 'none') {
                        Dom.bottom_nav.show();
                        Dom.top_nav.show();
                    } else {
                        Dom.bottom_nav.hide();
                        Dom.top_nav.hide();
                        font_container.hide();
                        font_button.removeClass('current');
                    }

                });
            })();
        }

        return main();
    })();
</script>
</body>
</html>